<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %> --%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>20的博客</title>
		<%-- <%@ include file="/static/head.jsp"%> --%>
		<%@ include file="/WEB-INF/view/head.jsp"%>
		<style type="text/css">
.article{
	margin-top: 10px;
	padding: 10px;
	box-shadow: 0px  1px  4px rgba(0,0,0,0.3);
	background-color: #fff;
}
.article:HOVER {
	background-color: #eee;
}

.article-title{
	font-size: 20px;
	color: black;
}
.article-time{
color: #909090;
font-size: 10px;
}
.article-msg{
color: #606060;
font-size: 14px;
}
.article-list{

}

.index{
            margin-top: 10px;
            padding:20px;
            background-color: #5885b4;
            border:1px solid #fcfcfc;
        }
        
.article-type{
	margin-top: 10px;
	background-color: #fff;
	padding:20px;
}

.article-type-tag{
	background-color: #eee;
	padding:10px;
	margin-right: 5px;
	line-height: 40px;

}
.article-type-tag:HOVER{
	background-color: #5885b4;
	text-decoration:none;
	padding:10px;

}

		</style>
	</head>
	<body >
		<%@ include file="/WEB-INF/view/nav.jsp"%>
		<div style="background-image: url('<c:url value="/static/blog/img/back.png"/>');padding:50px;" class="container-fluid" >
		<div  class="container">
			<div class="row">
				<div class="col-md-9" >
				<div id="article_body">
				<c:forEach items="${page.rows}" var="article" varStatus="vs">  
					<div class="article">
				    <a href="javascript:articleHelper('${article.article_id }')">
				      <div class="row">
				      	<div class="col-md-3">
				      		<div style="width: 100%;background-color: #5885b4;padding:5px;">
								<img class="img-responsive" src="<c:url value="${article.img_id }"/>" style="border-radius:0px;">
							</div>
				      	</div>
				      	<div class="col-md-9">
					      	
						      <div class="article-title">
						        ${article.article_name }
						        <c:if test="${article.visit_quantity > 0 && article.visit_quantity <= 10 }"><img alt="" src="<c:url value="/static/blog/img/st1.gif"/>"></c:if>
						        <c:if test="${article.visit_quantity > 10 && article.visit_quantity <= 20 }"><img alt="" src="<c:url value="/static/blog/img/st2.gif"/>"></c:if>
						        <c:if test="${article.visit_quantity > 20 && article.visit_quantity <= 50 }"><img alt="" src="<c:url value="/static/blog/img/st3.gif"/>"></c:if>
						        <c:if test="${article.visit_quantity > 50 && article.visit_quantity <= 100 }"><img alt="" src="<c:url value="/static/blog/img/st4.gif"/>"></c:if>
						        <c:if test="${article.visit_quantity > 100  }"><img alt="" src="<c:url value="/static/blog/img/st5.gif"/>"></c:if>
						      </div>
						      <div style="width:100%; height:2px; border-top:1px solid #999; clear:both;"></div>
						       <div class="article-msg">
						        ${article.article_desc }
						      </div>
						      <div class="article-time">
						        <time>${article.created_at } 
								        评论(${article.comment_quantity }) 
								        点击(${article.visit_quantity })
						        </time>
						      </div>
						     
				      	</div>
				      </div>
				    </a>
					</div>
				</c:forEach> 
				
<%-- 					<div class="manu">
					<c:if test="${page.start == 1}"><span class="disabled" ><  Prev</span></c:if>
					<c:if test="${page.start != 1}"><a href="javascript:pageHelper(${page.start-1 })" ><  Prev</a></c:if>
							<span class="current">${page.start}</span>
					
					<c:if test="${page.maxSize == page.start}"><span class="disabled" >Next  ></span></c:if>
					<c:if test="${page.maxSize != page.start}"><a href="javascript:pageHelper(${page.start+1 })">Next  > </c:if>
					</a></div> --%>
					<script type="text/javascript">
						function pageHelper(start){
							window.location.href = '<c:url value='/article/out'/>?start='+start;
						}
					</script>
					</div>
					<div id="article_footer">
					
					</div>
				</div>
				<div class="col-md-3"> 
				<div class="index">
				 		<div style="width: 200px;height:200px;background-color: #c4e3f3;border-radius: 100px;margin: 0 auto;">
	                        <img width="180px" height="180px;"
	                             style="margin-top: 10px;margin-left: 10px;border-radius: 90px;"
	                        src="<c:url value="/static/blog/img/head.jpg"/>"/>
	                    </div>
	                    <div style="width: 100%;text-align: center;color: #c4e3f3">
			                G20 &nbsp;江苏 & 苏州
<%-- 			                <hr>
			                <img src="<c:url value="/static/blog/img/mywx.png"/>" height="100px" width="100px">
			                <hr> --%>
			            </div>
	                    
				</div>
					<div class="article-type">
						<div><img alt="" src="<c:url value="/static/blog/img/tj.gif"/>">最新留言</div>
						<div style="width:100%; height:2px; border-top:1px solid #999; clear:both;"></div>
						大煞风景SD卡就放
					</div>
					
					<div class="article-type">
						<div><img alt="" src="<c:url value="/static/blog/img/tj.gif"/>">访问统计</div>
						<div style="width:100%; height:2px; border-top:1px solid #999; clear:both;"></div>
						<p>访问人数：100</p>
						<p>网页点击：100</p>
						<p>今日访问：10</p>
					</div>
					
					<div class="article-type">
						<div><img alt="" src="<c:url value="/static/blog/img/tj.gif"/>">友情链接</div>
						<div style="width:100%; height:2px; border-top:1px solid #999; clear:both;"></div>
						<p>访问人数：100</p>
						<p>网页点击：100</p>
						<p>今日访问：10</p>
					</div>
					
				</div>
			</div>
		</div>
		</div>
		<%@ include file="/WEB-INF/view/footer.jsp"%>
	</body>
	<script type="text/javascript">
	var isend = false;
	
	function articleHelper(id){
		window.location.href = '<c:url value='/article/out/showArticle'/>?article_id='+id;
	}
	
	
	//文档高度
	function getDocumentTop() {
	    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
	    if (document.body) {
	        bodyScrollTop = document.body.scrollTop;
	    }
	    if (document.documentElement) {
	        documentScrollTop = document.documentElement.scrollTop;
	    }
	    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;    return scrollTop;
	}
	 
	//可视窗口高度
	function getWindowHeight() {
	    var windowHeight = 0;    if (document.compatMode == "CSS1Compat") {
	        windowHeight = document.documentElement.clientHeight;
	    } else {
	        windowHeight = document.body.clientHeight;
	    }
	    return windowHeight;
	}
	//滚动条滚动高度
	function getScrollHeight() {
	    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
	    if (document.body) {
	        bodyScrollHeight = document.body.scrollHeight;
	    }
	    if (document.documentElement) {
	        documentScrollHeight = document.documentElement.scrollHeight;
	    }
	    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;    return scrollHeight;
	}
	
	window.onscroll = function () {
		    //监听事件内容
		    if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
		        //当滚动条到底时,这里是触发内容
		        //异步请求数据,局部刷新dom
		    	$.ajax({
					type : 'post',
					url : "<c:url value='/article/out/queryArticle'/>",
					data : {},
					dataType:'json', 
					success : function(data) {
						if (data.rows.length == 0 && !isend) {
							$("#article_footer").html('<p>已经没有更多信息了...</p>');
						}else{
							var html = "";
							for(var i=0 ;i<data.rows.length;i++){
								html+='<div class="article">';
								html+='	<a href="javascript:articleHelper(\''+data.rows[i].article_id+'\')">';
								html+='	<div class="row">';
								html+='		<div class="col-md-3">';
								html+='			<div style="width: 100%;background-color: #5885b4;padding:5px;">';
								html+='				<img class="img-responsive" src="'+"/wolf-web"+data.rows[i].img_id+'" style="border-radius:0px;">';
								html+='			</div>';
								html+='		</div>';
								html+='		<div class="col-md-9">';
								html+=' 		<div class="article-title">';
								html+=				data.rows[i].article_name;
								html+='			</div>';
								html+='			<div style="width:100%; height:2px; border-top:1px solid #999; clear:both;"></div>';
								html+='			<div class="article-msg">';
								html+= 				data.rows[i].article_desc ;
								html+='			</div>';
								html+='			<div class="article-time">';
								html+='				<time>';
								html+=					data.rows[i].created_at +"评论("+data.rows[i].comment_quantity+")"+"点击("+data.rows[i].visit_quantity+")" ;
								html+='				</time>';
								html+='			</div>';
								html+='		</div>';
								html+='	</div>';
								html+='</a>';
								html+='</div>';
								/* 	        ${article.article_name }
									        <c:if test="${article.visit_quantity > 0 && article.visit_quantity <= 10 }"><img alt="" src="<c:url value="/static/blog/img/st1.gif"/>"></c:if>
									        <c:if test="${article.visit_quantity > 10 && article.visit_quantity <= 20 }"><img alt="" src="<c:url value="/static/blog/img/st2.gif"/>"></c:if>
									        <c:if test="${article.visit_quantity > 20 && article.visit_quantity <= 50 }"><img alt="" src="<c:url value="/static/blog/img/st3.gif"/>"></c:if>
									        <c:if test="${article.visit_quantity > 50 && article.visit_quantity <= 100 }"><img alt="" src="<c:url value="/static/blog/img/st4.gif"/>"></c:if>
									        <c:if test="${article.visit_quantity > 100  }"><img alt="" src="<c:url value="/static/blog/img/st5.gif"/>"></c:if> */
							}
							$("#article_body").append(html);
						}
					}
				});
		    }
		}
	</script>
</html>